function Page(classname,options){
    // 获取容器
    this.container = document.querySelector("."+classname);
    // 将用户传进来的数据作为属性
    this.options = options || {};
    // 首先自己定义一个默认值
    this.default = {
        language:{
            first:"首页",
            prev:"上一页",
            list:null,
            next:"下一页",
            last:"尾页"
        },
        pageData:{
            total:1000,
            pageSize:10
        }
    }
    // 定义放页码的属性
    this.list = null;
    // 定义当前页
    this.currentPage = 1;
    // 使用用户传进来的数据替换自己定义的默认值
    this.setDefault()
    if(!this.options.show){
        this.default.show = function(){}
    }else{
        this.default.show = this.options.show
    }
    // 创建div
    this.createDiv()
    // // 创建页码
    // this.createPage();
    // // 设置禁用项
    // this.setDisabled();
    // // 执行函数
    // console.log(this.default);
    // this.default.show(this.currentPage)
    this.init()
    // 添加文本框和按钮
    this.appendInput()
    // 绑定事件点击动起来
    this.clicks()
}
// 添加按钮和文本框
Page.prototype.appendInput = function(){
    var input = document.createElement("input");
    this.setStyle(input,{
        border:"none",
        outline:"none",
        margin:"5px",
        width:"50px",
        height:"30px",
        paddingLeft:"8px",
        fontSize:"16px",
        border:"1px solid #000",
    })
    this.box.appendChild(input);
    var btn = document.createElement("button");
    btn.innerText = 'GO';
    this.setStyle(btn,{
        border:"none",
        outline:"none",
        margin:"5px",
        height:"34px",
        border:"1px solid #000",
    })
    this.box.appendChild(btn);
}
// 设置禁用项
Page.prototype.setDisabled = function(){
    if(this.currentPage == 1){
        this.box.children[1].style.backgroundColor = this.box.children[0].style.backgroundColor = '#ccc';
        this.box.children[1].setAttribute("disabled",true)
        this.box.children[0].setAttribute("disabled",true)
    }else{
        this.box.children[1].style.backgroundColor = this.box.children[0].style.backgroundColor = 'transparent';
        this.box.children[1].removeAttribute("disabled")
        this.box.children[0].removeAttribute("disabled")
    }
    if(this.currentPage == this.totalPage){
        this.box.children[3].style.backgroundColor = this.box.children[4].style.backgroundColor = '#ccc';
        this.box.children[4].setAttribute("disabled",true)
        this.box.children[3].setAttribute("disabled",true)
    }else{
        this.box.children[4].style.backgroundColor = this.box.children[3].style.backgroundColor = 'transparent';
        this.box.children[3].removeAttribute("disabled")
        this.box.children[4].removeAttribute("disabled")
    }
}
// 封装重复代码
Page.prototype.init = function(){
    this.createPage();
    this.setDisabled();
    this.default.show(this.currentPage)
    this.showText()
}
// 点击动起来
Page.prototype.clicks = function(){
    this.box.onclick = e=>{
        var e =  e || windnow.event;
        var target = e.target || e.srcElement;
        if(target.className == 'first' && target.getAttribute("disabled")!="true"){
            this.currentPage = 1;
            this.init()
        }else if(target.className == 'prev' && target.getAttribute("disabled")!="true"){
            this.currentPage--
            if(this.currentPage<=1){
                this.currentPage = 1
            }
            this.init()
        }else if(target.className == 'next' && target.getAttribute("disabled")!="true"){
            this.currentPage++
            if(this.currentPage>=this.totalPage){
                this.currentPage = this.totalPage
            }
            this.init()
        }else if(target.className == 'last' && target.getAttribute("disabled")!="true"){
            this.currentPage = this.totalPage
            this.init()
        }else if(target.nodeName == "P" && this.currentPage!=target.innerText-0){
            this.currentPage = target.innerText - 0;
            this.init()
        }else if(target.nodeName == "BUTTON" && this.currentPage!=target.previousElementSibling.value-0){
            if(target.previousElementSibling.value - 0>=this.totalPage){
                target.previousElementSibling.value = this.totalPage
            }
            if(target.previousElementSibling.value - 0<=1){
                target.previousElementSibling.value = 1
            }
            this.currentPage = target.previousElementSibling.value - 0;
            this.init()
        }
    }
}
// 创建页码
Page.prototype.createPage = function(){
    this.list.innerHTML = '';
    // 判断总页数是否大于5
    if(this.totalPage<=5){
        // 循环 1~总页数  页码
        for(var i=1;i<=this.totalPage;i++){
            var p = document.createElement("p");
            this.setStyle(p,{
                margin:"5px",
                padding:"5px",
                border:"1px solid #000",
                display:"inline-block"
            })
            if(i==this.currentPage){
                p.style.background = 'orange';
            }
            p.innerText = i;
            this.list.appendChild(p);
        }
    }else{
        // 前2页，后2页，中间页码
        if(this.currentPage<3){
            for(var i=1;i<=5;i++){
                var p = document.createElement("p");
                this.setStyle(p,{
                    margin:"5px",
                    padding:"5px",
                    border:"1px solid #000",
                    display:"inline-block"
                })
                if(i==this.currentPage){
                    p.style.background = 'orange';
                }
                p.innerText = i;
                this.list.appendChild(p);
            }
        }else if(this.currentPage>=this.totalPage-1){
            for(var i=this.totalPage-4;i<=this.totalPage;i++){
                var p = document.createElement("p");
                this.setStyle(p,{
                    margin:"5px",
                    padding:"5px",
                    border:"1px solid #000",
                    display:"inline-block"
                })
                if(i==this.currentPage){
                    p.style.background = 'orange';
                }
                p.innerText = i;
                this.list.appendChild(p);
            }
        }else{
            for(var i=this.currentPage-2;i<=this.currentPage+2;i++){
                var p = document.createElement("p");
                this.setStyle(p,{
                    margin:"5px",
                    padding:"5px",
                    border:"1px solid #000",
                    display:"inline-block"
                })
                if(i==this.currentPage){
                    p.style.background = 'orange';
                }
                p.innerText = i;
                this.list.appendChild(p);
            }
        }
    }
}
Page.prototype.createDiv = function(){
    // 创建大盒子
    this.box = document.createElement("div");
    this.setStyle(this.box,{
        // width:"800px",

        height:"50px",
        // border:"1px solid #000",
        display:"inline-block",
        // "justify-content":"center",
        // alignItems:"center",
        marginTop:"50px"
    })
    this.container.appendChild(this.box);
    // 创建5个盒子
    for(var attr in this.default.language){
        var div = document.createElement("div");
        if(attr!="list"){
            this.setStyle(div,{
                padding:"5px",
                margin:"5px",
                border:"1px solid #000",
                display:"inline-block"
            })
            div.innerText = this.default.language[attr];
        }else{
            this.list = div;
            this.setStyle(this.list,{
                display:"flex",
                justifyContent:"center",
                "alignItems":"center",
                display:"inline-block",
            });
        }
        div.className = attr;
        this.box.appendChild(div);
    }
}
Page.prototype.setDefault = function(){
    if(this.options.language){
        for(var attr in this.options.language){
            this.default.language[attr] = this.options.language[attr];
        }
    }
    if(this.options.pageData){
        for(var attr in this.options.pageData){
            this.default.pageData[attr] = this.options.pageData[attr];
        }
    }
    // 定义总页数
    this.totalPage = Math.ceil(this.default.pageData.total/this.default.pageData.pageSize)
}
Page.prototype.setStyle = function(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
}
Page.prototype.showText = function(){
    var span = this.box.querySelector("span");
    if(span){
        this.box.removeChild(span);
    }
    var span = document.createElement("span");
    span.innerText = `总共${this.default.pageData.total}条数据，每页显示${this.default.pageData.pageSize}条，总共${this.totalPage}页，当前第${this.currentPage}页`;
    this.box.appendChild(span);
}